<?php
session_start();
require_once '../config/database.php';
require_once '../includes/functions.php';

if (!isset($_SESSION['student_id'])) {
    redirect('login.php');
}

$exam_id = $_GET['exam_id'] ?? null;
if (!$exam_id) {
    redirect('dashboard.php');
}

// Get exam details
$exam = get_exam_details($exam_id, $pdo);
if (!$exam) {
    die("Exam not found!");
}

// Check if subjects are selected for this exam
$selected_subjects = $_SESSION['selected_subjects'] ?? [];
$current_exam_id = $_SESSION['current_exam_id'] ?? null;

// Verify that the selected subjects belong to the current exam
if (empty($selected_subjects) || $current_exam_id != $exam_id) {
    // Redirect back to subject selection if no subjects are selected or exam mismatch
    redirect("exam_selection.php?exam_id=$exam_id");
}

// Check if student has an active session for this specific subject combination
$selected_subjects_json = json_encode($selected_subjects);
$stmt = $pdo->prepare("SELECT * FROM exam_sessions WHERE student_id = ? AND exam_id = ? AND selected_subjects = ? AND status = 'in_progress'");
$stmt->execute([$_SESSION['student_id'], $exam_id, $selected_subjects_json]);
$session = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$session) {
    // Create new session with selected subjects and generate random question order
    $start_time = date('Y-m-d H:i:s');
    $end_time = date('Y-m-d H:i:s', strtotime("+{$exam['duration']} minutes"));
    $time_remaining = $exam['duration'] * 60;
    
    // Get questions only for selected subjects
    $placeholders = str_repeat('?,', count($selected_subjects) - 1) . '?';
    $stmt = $pdo->prepare("SELECT id FROM questions WHERE exam_id = ? AND subject_id IN ($placeholders)");
    $stmt->execute(array_merge([$exam_id], $selected_subjects));
    $question_ids = $stmt->fetchAll(PDO::FETCH_COLUMN);
    
    // Shuffle questions for random order
    shuffle($question_ids);
    $question_order = json_encode($question_ids);
    
    $stmt = $pdo->prepare("INSERT INTO exam_sessions (student_id, exam_id, selected_subjects, start_time, end_time, time_remaining, question_order) VALUES (?, ?, ?, ?, ?, ?, ?)");
    $stmt->execute([$_SESSION['student_id'], $exam_id, $selected_subjects_json, $start_time, $end_time, $time_remaining, $question_order]);
    $session_id = $pdo->lastInsertId();
    
    $session = [
        'id' => $session_id,
        'time_remaining' => $time_remaining,
        'question_order' => $question_order
    ];
} else {
    $session_id = $session['id'];
    $time_remaining = $session['time_remaining'];
    $question_order = $session['question_order'] ?? '';
}

// Handle case where question_order might be empty or invalid
if (empty($question_order)) {
    // Regenerate question order if missing
    $placeholders = str_repeat('?,', count($selected_subjects) - 1) . '?';
    $stmt = $pdo->prepare("SELECT id FROM questions WHERE exam_id = ? AND subject_id IN ($placeholders)");
    $stmt->execute(array_merge([$exam_id], $selected_subjects));
    $question_ids = $stmt->fetchAll(PDO::FETCH_COLUMN);
    shuffle($question_ids);
    $question_order = json_encode($question_ids);
    
    // Update the session with the new question order
    $stmt = $pdo->prepare("UPDATE exam_sessions SET question_order = ? WHERE id = ?");
    $stmt->execute([$question_order, $session_id]);
}

// Decode question order safely
$question_ids = json_decode($question_order, true) ?? [];
$total_questions = count($question_ids);

if ($total_questions === 0) {
    // Get subject names for better error message
    $placeholders = str_repeat('?,', count($selected_subjects) - 1) . '?';
    $stmt = $pdo->prepare("SELECT name FROM subjects WHERE id IN ($placeholders)");
    $stmt->execute($selected_subjects);
    $subject_names = $stmt->fetchAll(PDO::FETCH_COLUMN);
    
    die("No questions found for the selected subjects: " . implode(', ', $subject_names) . ". Please contact your administrator.");
}

// Get selected subject names for display
$placeholders = str_repeat('?,', count($selected_subjects) - 1) . '?';
$stmt = $pdo->prepare("SELECT name FROM subjects WHERE id IN ($placeholders)");
$stmt->execute($selected_subjects);
$selected_subject_names = $stmt->fetchAll(PDO::FETCH_COLUMN);

// Handle question navigation - 5 questions per page
$current_page = $_GET['page'] ?? 1;
$questions_per_page = 5;
$total_pages = ceil($total_questions / $questions_per_page);

// Validate current page
if ($current_page < 1) $current_page = 1;
if ($current_page > $total_pages) $current_page = $total_pages;

// Get questions for current page
$start_index = ($current_page - 1) * $questions_per_page;
$end_index = min($start_index + $questions_per_page, $total_questions);
$current_page_question_ids = array_slice($question_ids, $start_index, $questions_per_page);

// Get current page questions details
$placeholders = str_repeat('?,', count($current_page_question_ids) - 1) . '?';
$stmt = $pdo->prepare("SELECT q.*, s.name as subject_name FROM questions q LEFT JOIN subjects s ON q.subject_id = s.id WHERE q.id IN ($placeholders)");
$stmt->execute($current_page_question_ids);
$current_questions = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Reindex by question ID for easy access
$current_questions_by_id = [];
foreach ($current_questions as $question) {
    $current_questions_by_id[$question['id']] = $question;
}

// Get saved answers for this session to pre-fill form
$stmt = $pdo->prepare("SELECT question_id, selected_answer FROM student_answers WHERE session_id = ?");
$stmt->execute([$session_id]);
$saved_answers = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);

// Handle answer saving (save without submitting)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['save_answer']) || isset($_POST['next']) || isset($_POST['previous']) || isset($_POST['save_all'])) {
        // Handle multiple questions submission
        if (isset($_POST['selected_answers']) && is_array($_POST['selected_answers'])) {
            foreach ($_POST['selected_answers'] as $question_id => $selected_answer) {
                if (!empty($selected_answer)) {
                    // Check if answer already exists
                    $stmt = $pdo->prepare("SELECT id FROM student_answers WHERE session_id = ? AND question_id = ?");
                    $stmt->execute([$session_id, $question_id]);
                    
                    if ($stmt->rowCount() > 0) {
                        // Update existing answer
                        $stmt = $pdo->prepare("UPDATE student_answers SET selected_answer = ? WHERE session_id = ? AND question_id = ?");
                        $stmt->execute([$selected_answer, $session_id, $question_id]);
                    } else {
                        // Insert new answer
                        $stmt = $pdo->prepare("INSERT INTO student_answers (session_id, question_id, selected_answer) VALUES (?, ?, ?)");
                        $stmt->execute([$session_id, $question_id, $selected_answer]);
                    }
                    
                    // Update saved answers array
                    $saved_answers[$question_id] = $selected_answer;
                }
            }
        }
        
        // Update time remaining
        $time_remaining = $_POST['time_remaining'] ?? $time_remaining;
        $stmt = $pdo->prepare("UPDATE exam_sessions SET time_remaining = ? WHERE id = ?");
        $stmt->execute([$time_remaining, $session_id]);
        
        // Redirect based on action
        if (isset($_POST['next'])) {
            $next_page = min($current_page + 1, $total_pages);
            redirect("exam.php?exam_id=$exam_id&page=$next_page");
        } elseif (isset($_POST['previous'])) {
            $prev_page = max($current_page - 1, 1);
            redirect("exam.php?exam_id=$exam_id&page=$prev_page");
        } elseif (isset($_POST['save_all'])) {
            // Show success message and stay on current page
            $_SESSION['save_message'] = "All answers saved successfully!";
            redirect("exam.php?exam_id=$exam_id&page=$current_page");
        } else {
            // Stay on current page if just saving
            redirect("exam.php?exam_id=$exam_id&page=$current_page");
        }
    }
}

// Handle final submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_exam'])) {
    // Update time remaining first
    $time_remaining = $_POST['time_remaining'] ?? $time_remaining;
    $stmt = $pdo->prepare("UPDATE exam_sessions SET time_remaining = ? WHERE id = ?");
    $stmt->execute([$time_remaining, $session_id]);
    
    // Update all answers with correctness and submit exam
    $stmt = $pdo->prepare("
        UPDATE student_answers sa 
        JOIN questions q ON sa.question_id = q.id 
        SET sa.is_correct = (q.correct_answer = sa.selected_answer)
        WHERE sa.session_id = ?
    ");
    $stmt->execute([$session_id]);
    
    // Submit exam
    $stmt = $pdo->prepare("UPDATE exam_sessions SET status = 'completed', time_remaining = 0 WHERE id = ?");
    $stmt->execute([$session_id]);
    
    // Calculate and save result
    $correct_answers = calculate_score($session_id, $pdo);
    $questions_attempted = count($saved_answers);
    $percentage = ($correct_answers / $total_questions) * 100;
    
    $stmt = $pdo->prepare("INSERT INTO results (session_id, total_questions, questions_attempted, correct_answers, score, percentage) VALUES (?, ?, ?, ?, ?, ?)");
    $stmt->execute([$session_id, $total_questions, $questions_attempted, $correct_answers, $correct_answers, $percentage]);
    
    // Clear selected subjects from session after exam completion
    unset($_SESSION['selected_subjects']);
    unset($_SESSION['current_exam_id']);
    
    redirect("result.php?session_id=$session_id");
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam - <?php echo $exam['name']; ?></title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        .exam-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            min-height: 100vh;
        }
        
        .exam-header {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .exam-info h2 {
            margin: 0;
            color: #2c3e50;
            font-size: 1.5rem;
        }
        
        .selected-subjects {
            margin-top: 0.5rem;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .subject-badge {
            display: inline-block;
            background: #3498db;
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            margin: 0.2rem;
            font-size: 0.8rem;
        }
        
        .exam-timer {
            background: #27ae60;
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        .exam-timer.warning {
            background: #e67e22;
            animation: pulse 1s infinite;
        }
        
        .exam-timer.danger {
            background: #e74c3c;
            animation: pulse 0.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .exam-content {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .questions-container {
            display: grid;
            gap: 2rem;
        }
        
        .question-card {
            padding: 1.5rem;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .question-card:hover {
            border-color: #3498db;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.1);
        }
        
        .question-subject {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #e74c3c;
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e1e8ed;
            padding-right: 100px;
        }
        
        .question-header h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 1.2rem;
        }
        
        .marks {
            background: #3498db;
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .question-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }
        
        .options {
            display: grid;
            gap: 1rem;
        }
        
        .option {
            display: flex;
            align-items: center;
            padding: 1rem;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .option:hover {
            border-color: #3498db;
            background: #f8f9fa;
        }
        
        .option input[type="radio"] {
            margin-right: 1rem;
            transform: scale(1.2);
        }
        
        .option.selected {
            border-color: #3498db;
            background: #e3f2fd;
        }
        
        .exam-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 2px solid #e1e8ed;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .page-link {
            display: inline-block;
            padding: 0.5rem 0.8rem;
            border: 2px solid #e1e8ed;
            border-radius: 6px;
            text-decoration: none;
            color: #6c757d;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .page-link.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .page-link.answered {
            background: #27ae60;
            color: white;
            border-color: #27ae60;
        }
        
        .page-link:hover:not(.active) {
            border-color: #3498db;
            color: #3498db;
        }
        
        .nav-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
            transform: translateY(-1px);
        }
        
        .btn-secondary {
            background: #95a5a6;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #7f8c8d;
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
        }
        
        .btn-success:hover {
            background: #219653;
            transform: translateY(-1px);
        }
        
        .progress-info {
            text-align: center;
            margin-bottom: 1rem;
            color: #6c757d;
            font-weight: 500;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .save-status {
            text-align: center;
            margin-top: 1rem;
            color: #27ae60;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .save-status.show {
            opacity: 1;
        }
        
        .alert-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #e74c3c;
            color: white;
            padding: 1rem;
            text-align: center;
            font-weight: bold;
            z-index: 1000;
            animation: slideDown 0.5s ease;
        }
        
        @keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }
        
        .time-warning {
            background: #e67e22 !important;
        }
        
        .time-critical {
            background: #e74c3c !important;
        }
        
        @media (max-width: 768px) {
            .exam-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
            
            .exam-navigation {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-buttons {
                width: 100%;
                justify-content: space-between;
            }
            
            .pagination {
                justify-content: center;
            }
            
            .btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }
            
            .question-subject {
                position: relative;
                top: auto;
                right: auto;
                display: inline-block;
                margin-bottom: 0.5rem;
            }
            
            .question-header {
                padding-right: 0;
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
    <?php if (isset($_SESSION['save_message'])): ?>
        <div class="save-status show" id="saveStatus"><?php echo $_SESSION['save_message']; unset($_SESSION['save_message']); ?></div>
    <?php endif; ?>
    
    <div id="timeAlert" class="alert-banner" style="display: none;">
        ⚠️ Warning: Less than 5 minutes remaining! Submit your exam soon.
    </div>

    <div class="exam-container">
        <header class="exam-header">
            <div class="exam-info">
                <h2><?php echo htmlspecialchars($exam['name']); ?> (<?php echo $exam['year']; ?>)</h2>
                <div class="selected-subjects">
                    <strong>Selected Subjects:</strong>
                    <?php foreach ($selected_subject_names as $subject_name): ?>
                        <span class="subject-badge"><?php echo htmlspecialchars($subject_name); ?></span>
                    <?php endforeach; ?>
                </div>
                <p>Total Questions: <?php echo $total_questions; ?> | Page: <?php echo $current_page; ?> of <?php echo $total_pages; ?></p>
            </div>
            <div class="exam-timer" id="examTimer">
                <div id="timer">Time: <span id="time-display"><?php echo gmdate("H:i:s", $time_remaining); ?></span></div>
            </div>
        </header>
        
        <div class="progress-info">
            Showing questions <?php echo $start_index + 1; ?> - <?php echo $end_index; ?> of <?php echo $total_questions; ?> 
            | Answered: <?php echo count($saved_answers); ?> / <?php echo $total_questions; ?>
        </div>

        <div class="exam-content">
            <form method="POST" id="exam-form">
                <input type="hidden" name="time_remaining" id="time_remaining" value="<?php echo $time_remaining; ?>">
                
                <div class="questions-container">
                    <?php foreach ($current_page_question_ids as $index => $question_id): 
                        $question = $current_questions_by_id[$question_id] ?? null;
                        if (!$question) continue;
                        
                        $question_number = $start_index + $index + 1;
                        $current_answer = $saved_answers[$question_id] ?? null;
                    ?>
                    <div class="question-card">
                        <span class="question-subject"><?php echo htmlspecialchars($question['subject_name']); ?></span>
                        <div class="question-header">
                            <h3>Question <?php echo $question_number; ?></h3>
                            <span class="marks">(<?php echo $question['marks']; ?> mark<?php echo $question['marks'] > 1 ? 's' : ''; ?>)</span>
                        </div>
                        <p class="question-text"><?php echo htmlspecialchars($question['question_text']); ?></p>
                        
                        <div class="options">
                            <?php 
                            $options = [
                                'A' => $question['option_a'],
                                'B' => $question['option_b'],
                                'C' => $question['option_c'],
                                'D' => $question['option_d']
                            ];
                            
                            foreach ($options as $letter => $option_text): 
                                $is_checked = $current_answer === $letter;
                            ?>
                            <label class="option <?php echo $is_checked ? 'selected' : ''; ?>">
                                <input type="radio" name="selected_answers[<?php echo $question_id; ?>]" 
                                       value="<?php echo $letter; ?>" 
                                       <?php echo $is_checked ? 'checked' : ''; ?>>
                                <span><?php echo $letter; ?>. <?php echo htmlspecialchars($option_text); ?></span>
                            </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <div class="save-status" id="saveStatus">Answers saved successfully!</div>

                <div class="exam-navigation">
                    <div class="pagination">
                        <?php for ($page = 1; $page <= $total_pages; $page++): 
                            $is_answered_page = false;
                            $page_start = ($page - 1) * $questions_per_page;
                            $page_question_ids = array_slice($question_ids, $page_start, $questions_per_page);
                            
                            foreach ($page_question_ids as $qid) {
                                if (isset($saved_answers[$qid])) {
                                    $is_answered_page = true;
                                    break;
                                }
                            }
                        ?>
                            <a href="exam.php?exam_id=<?php echo $exam_id; ?>&page=<?php echo $page; ?>" 
                               class="page-link <?php echo $page == $current_page ? 'active' : ''; ?> <?php echo $is_answered_page ? 'answered' : ''; ?>">
                                <?php echo $page; ?>
                            </a>
                        <?php endfor; ?>
                    </div>
                    
                    <div class="nav-buttons">
                        <?php if ($current_page > 1): ?>
                            <button type="submit" name="previous" class="btn btn-secondary">← Previous</button>
                        <?php endif; ?>
                        
                        <button type="submit" name="save_all" class="btn btn-primary" id="saveButton">Save All Answers</button>
                        
                        <?php if ($current_page < $total_pages): ?>
                            <button type="submit" name="next" class="btn btn-primary">Next →</button>
                        <?php else: ?>
                            <button type="submit" name="submit_exam" class="btn btn-success" onclick="return confirm('Are you sure you want to submit the exam? You cannot change your answers after submission.')">
                                Submit Exam ✓
                            </button>
                        <?php endif; ?>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Timer functionality
        let timeRemaining = <?php echo $time_remaining; ?>;
        const timerElement = document.getElementById('time-display');
        const timeInput = document.getElementById('time_remaining');
        const examTimer = document.getElementById('examTimer');
        const timeAlert = document.getElementById('timeAlert');
        const saveStatus = document.getElementById('saveStatus');
        let warningShown = false;
        let criticalWarningShown = false;

        function updateTimer() {
            if (timeRemaining <= 0) {
                // Auto-submit when time is up
                autoSubmitExam();
                return;
            }

            timeRemaining--;
            timeInput.value = timeRemaining;
            
            const hours = Math.floor(timeRemaining / 3600);
            const minutes = Math.floor((timeRemaining % 3600) / 60);
            const seconds = timeRemaining % 60;
            
            timerElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            // Show warning when less than 5 minutes remaining
            if (timeRemaining < 300 && timeRemaining > 60 && !warningShown) {
                examTimer.classList.add('warning');
                timeAlert.style.display = 'block';
                warningShown = true;
                
                // Flash the alert
                setInterval(() => {
                    timeAlert.style.display = timeAlert.style.display === 'none' ? 'block' : 'none';
                }, 1000);
            }
            
            // Show critical warning when less than 1 minute remaining
            if (timeRemaining <= 60 && !criticalWarningShown) {
                examTimer.classList.remove('warning');
                examTimer.classList.add('danger');
                criticalWarningShown = true;
            }
        }

        // Auto-save function
        function autoSaveAnswers() {
            const formData = new FormData();
            formData.append('save_all', 'true');
            formData.append('time_remaining', timeRemaining);
            
            // Add all selected answers
            document.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
                formData.append(radio.name, radio.value);
            });
            
            fetch('exam.php?exam_id=<?php echo $exam_id; ?>&page=<?php echo $current_page; ?>', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(() => {
                saveStatus.classList.add('show');
                setTimeout(() => {
                    saveStatus.classList.remove('show');
                }, 2000);
            })
            .catch(error => {
                console.error('Error saving answers:', error);
            });
        }

        // Auto-submit function
        function autoSubmitExam() {
            const form = document.getElementById('exam-form');
            const submitInput = document.createElement('input');
            submitInput.type = 'hidden';
            submitInput.name = 'submit_exam';
            submitInput.value = 'true';
            form.appendChild(submitInput);
            form.submit();
        }

        // Auto-save when selecting an option
        document.querySelectorAll('input[type="radio"]').forEach(radio => {
            radio.addEventListener('change', function() {
                // Update visual selection
                document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
                this.closest('.option').classList.add('selected');
                
                // Auto-save after a short delay
                setTimeout(autoSaveAnswers, 500);
            });
        });

        // Auto-save every 30 seconds
        setInterval(autoSaveAnswers, 30000);

        // Update timer every second
        setInterval(updateTimer, 1000);

        // Handle page refresh/unload
        window.addEventListener('beforeunload', function(e) {
            if (timeRemaining > 0) {
                // Auto-save on page unload
                navigator.sendBeacon('exam.php?exam_id=<?php echo $exam_id; ?>&page=<?php echo $current_page; ?>', 
                    new URLSearchParams({save_all: 'true', time_remaining: timeRemaining}));
            }
        });

        // Enhance navigation
        document.querySelectorAll('.page-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                autoSaveAnswers();
                setTimeout(() => {
                    window.location.href = this.href;
                }, 1000);
            });
        });
    </script>
</body>
</html>